<template>
	<view>
		<u-sticky offset-top="-90">
			<u-navbar back-text="返回" title="酒店订单"></u-navbar>
		</u-sticky>
		
		<view class="hotel-order">
			
			
			<u-card :title="title" 
					:thumb="'/static/img/hotel/hotel.png'" 
					:thumb-width="45" 
					:thumb-circle="true" 
					:sub-title = "'已消费'"
					v-for="item in 10"
					:key = "item"
					@click=""
			>
				<view class="" slot="body">
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
						<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
						<view class="u-body-item-title u-p-l-20">
							<view>1间，豪华双人房(每日消毒)</view>
							<view class="time">
								<text>2021-04-30</text>
								<text>-</text>
								<text>2021-05-01</text>
							</view>
							<view class="price">
								总价：￥95.00
							</view>
						</view>
						
					</view>
				</view>
				<view class="u-flex u-row-right" slot="foot" v-if="item % 2 == 0">
					<u-tag color="#19be6b" class="u-m-l-10" text="再次预订"></u-tag>
					<u-tag color="#19be6b" class="u-m-l-10" text="退款进度"></u-tag>
				</view>
				
			</u-card>
			
			
		</view>
		
	</view>
</template>

<script>
	import {hotelPreOrderList} from '../../../api/hotel.js'
	export default {
		data() {
			return {
				title: '华莱优住酒店',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				page: 1,
				limit: 20,
				orderList: [],
			}
		},
		onLoad() {
			this.getHotelOrderList()
		},
		methods: {
			// 获取订单列表
			async getHotelOrderList() {
				const params = {
					page: this.page,
					limit: this.limit
				}
				const res = await hotelPreOrderList(params)
				this.orderList = res.data.list
				
				console.log(res)
			}
		}
	}
</script>

<style lang="scss">

	.u-body-item-title {
		color: $u-tips-color;
		font-size: 28rpx;
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
